<template>
	<div class="container">
		<div class="left">
			<div
				:class="[{ selected: first_level == 1 }, 'item']"
				@click="changeItem(1)"
			>
				商品分类
			</div>

			<div
				:class="[{ selected: first_level == 2 }, 'item', 'padding2em']"
				@click="changeItem(2)"
			>
				用户
			</div>
			<div
				:class="[{ selected: first_level == 4 }, 'item']"
				@click="changeItem(4)"
			>
				配送路线
			</div>
			<div class="btn_box clearfix">
				<button @click="reset">重置</button>
				<button @click="confirm">确定</button>
			</div>
		</div>
		<!-- ---------------------------------------------------------- -->
		<div class="middle" v-if="first_level == 1 || first_level == 2">
			<div class="up_box">
				<div class="btn" @click="handleUp(1)">
					<img src="@/assets/images/up.png" alt="" />
				</div>
			</div>

			<div class="middle_box" ref="middle_container">
				<!-- 用户分组 -->
				<div class="middle_group_box" v-if="first_level == 2">
					<div
						:class="[{ selected: group_selected == '' }, 'item']"
						@click="handleUserGroup()"
					>
						全部分组
					</div>
					<div
						:class="[{ selected: item.id == group_selected }, 'item']"
						:ref="'titleRef' + item.id"
						v-for="(item, index) in group"
						:key="index"
						@click="handleUserGroup(item)"
					>
						{{ item.title }}
					</div>
				</div>

				<!-- 商品 -->
				<div class="middle_goods_box" v-if="first_level == 1">
					<div :class="['item']">
						<h4
							:class="[{ selected: goods_form.pid == '' }]"
							@click.stop="handleAllGoods"
						>
							全部商品
						</h4>
					</div>
					<div
						:class="['item']"
						:ref="'titleRef' + item.id"
						v-for="(item, index) in goods_type"
						:key="index"
					>
						<h4
							:class="[{ selected: item.id == goods_form.pid }]"
							@click.stop="expandGoods(item)"
						>
							{{ item.title }}
						</h4>
						<el-collapse-transition :key="index">
							<div class="second_category" v-if="item.show">
								<div>
									<li
										:class="[{ selected: second.id == goods_form.cid }]"
										v-for="second in item.selfNext"
										:key="second.id"
										@click="handleSecondsLevel(second)"
									>
										{{ second.title }}
									</li>
								</div>
							</div>
						</el-collapse-transition>
					</div>
				</div>
			</div>

			<div class="down_box">
				<div class="btn" @click="handleDown(1)">
					<img src="@/assets/images/down.png" alt="" />
				</div>
			</div>
		</div>
		<!-- ---------------------------------------------------------- -->
		<div class="right" ref="right_container">
			<!-- 商品选择 -->
			<div class="goods_data" v-if="is_show_third">
				<div v-if="first_level == 1">
					<div class="right_header">
						<el-checkbox
							v-if="!no_data_show"
							v-model="third_goods_all_checked"
							@change="handleGoodsAllChecked"
							>全选</el-checkbox
						>
					</div>
					<div class="right_main">
						<div
							:class="[{ selected: item.selected }, 'item']"
							v-for="item in third_goods"
							:key="item.id"
							@click="handleSelectGoods(item)"
						>
							{{ item.name }}
						</div>
					</div>
				</div>

				<!-- 用户选择 -->
				<div v-if="first_level == 2">
					<div class="right_header">
						<el-checkbox
							v-if="!no_data_show"
							v-model="third_user_all_checked"
							@change="handleUserAllChecked"
							>全选</el-checkbox
						>
					</div>
					<div class="right_main">
						<div
							:class="[{ selected: item.selected }, 'item']"
							v-for="item in third_user"
							:key="item.id"
							@click="handleSelectUser(item)"
						>
							{{ item.nickname }}
						</div>
					</div>
				</div>

				<!-- 路线选择 -->
				<div v-if="first_level == 4">
					<div class="right_header">
						<el-checkbox
							v-if="!no_data_show"
							v-model="line_all_checked"
							@change="handleLineAllChecked"
							>全选</el-checkbox
						>
					</div>
					<div class="right_main">
						<div
							:class="[{ selected: item.selected }, 'item']"
							v-for="item in line"
							:key="item.id"
							@click="handleSelectLine(item)"
						>
							{{ item.title }}
						</div>
					</div>
				</div>
			</div>
			<!-- 是否选择 -->
			<div class="select" v-else>
				<div class="select_box">
					<div
						:class="[{ selected: is_true == 2 }, 'item']"
						@click="handleTorF(2)"
					>
						是
					</div>
					<div
						:class="[{ selected: is_true == 1 }, 'item']"
						@click="handleTorF(1)"
					>
						否
					</div>
					<div
						:class="[{ selected: is_true == '' }, 'item']"
						@click="handleTorF(0)"
					>
						全部
					</div>
				</div>
			</div>

			<div class="no_data" v-if="no_data_show">
				<i class="el-icon-warning-outline"></i>
				<p>暂无数据</p>
			</div>
		</div>

		<div class="right_fixed">
			<div class="item" @click="handleUp(2)">
				<img src="@/assets/images/up.png" alt="" />
			</div>
			<div class="item" @click="handleDown(2)">
				<img src="@/assets/images/down.png" alt="" />
			</div>
		</div>

		<div class="back" @click="back">
			<i class="el-icon-close"></i>
		</div>
	</div>
</template>

<script>
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { get_goods_select, get_find_user } from "@/api/index";
import { parseTime, handleScrollup, handleScrolldown } from "@/utils/index";
const goods_form = {
	is_standard: "",
	line_ids: "",
	modify: "",
	out_status: "",
	remark: "",
	pid: "",
	cid: "",
	goods_spu_ids: "",
	group_id: "",
	uids: "",
};
export default {
	props: ["SEARCH_DATA"],
	data() {
		return {
			parseTime,
			handleScrollup,
			handleScrolldown,
			// 暂无数据
			no_data_show: false,
			// 商品分类
			goods_type: [
				{
					company_id: "",
					id: "",
					selfNext: [],
					title: "",
					show: false,
				},
			],
			// 全部三级商品
			third_goods: [],
			third_goods_all_checked: false,
			// 用户分组
			group: [],
			third_user_all_checked: false,
			group_selected: "",
			third_user: [],
			// 配送路线
			line: [
				{
					title: "",
					id: "",
					company_id: "",
				},
			],
			line_all_checked: false,
			third_line: [],

			// 一级选项选中
			first_level: 1,
			// 三级分类选择是否显示
			is_show_third: true,
			// 商品选择的form
			goods_form: JSON.parse(JSON.stringify(goods_form)),
			// 商品选中的详细
			goods_select_arr: [],
			// 是否按钮选择样式 1 否 2 是  全部为空
			is_true: "",
			// 是否选择选项
			true_or_false_list: {
				3: "is_standard",
				5: "modify",
				6: "out_status",
				7: "remark",
			},
			select: 1,
			checked: false,
			time: "",
		};
	},
	watch: {
		// 监听父组件传来的数据
		SEARCH_DATA: {
			handler(val, oldval) {
				this.updata();
			},
			deep: true,
			immediate: true,
		},
		// 商品分类，用户分组，配送路线的三级显示
		first_level(val) {
			let arr = [1, 2, 4];
			if (arr.indexOf(val) != -1) {
				this.is_show_third = true;
			} else {
				this.is_show_third = false;
			}
		},
		// 商品的选择
		third_goods: {
			handler(val, oldval) {
				let data = val;
				let arr = [];
				let len = 0;
				let third_goods = [];
				if (data.length == 0) {
					this.no_data_show = true;
				} else {
					this.no_data_show = false;
				}
				data.map((e) => {
					if (e.selected) {
						arr.push(e.id);
						third_goods.push(e);
						len += 1;
					}
				});
				this.goods_select_arr = third_goods;
				if (len == data.length && data.length != 0) {
					this.third_goods_all_checked = true;
				} else {
					this.third_goods_all_checked = false;
				}
				this.goods_form.goods_spu_ids = arr.join(",");
			},
			deep: true,
		},
		// 用户选择
		third_user: {
			handler(val, oldval) {
				let data = val;
				let arr = [];
				let len = 0;
				if (data.length == 0) {
					this.no_data_show = true;
				} else {
					this.no_data_show = false;
				}
				data.map((e) => {
					if (e.selected) {
						arr.push(e.id);
						len += 1;
					}
				});
				if (len == data.length && data.length != 0) {
					this.third_user_all_checked = true;
				} else {
					this.third_user_all_checked = false;
				}

				this.goods_form.uids = arr.join(",");
			},
			deep: true,
		},
		// 配送路线选择
		line: {
			handler(val, oldval) {
				let data = val;
				let arr = [];
				let len = 0;
				if (data.length == 0) {
					this.no_data_show = true;
				} else {
					this.no_data_show = false;
				}
				data.map((e) => {
					if (e.selected) {
						arr.push(e.id);
						len += 1;
					}
				});
				if (len == data.length && data.length != 0) {
					this.line_all_checked = true;
				} else {
					this.line_all_checked = false;
				}

				this.goods_form.line_ids = arr.join(",");
			},
			deep: true,
		},
	},
	computed: {},
	methods: {
		// 往上移动
		handleUp(type) {
			var el = "";
			switch (type) {
				case 1:
					el = this.$refs.middle_container;
					break;
				case 2:
					el = this.$refs.right_container;
					break;
			}
			this.handleScrollup(el);
		},
		// 往下移动
		handleDown(type) {
			var el = "";
			switch (type) {
				case 1:
					el = this.$refs.middle_container;
					break;
				case 2:
					el = this.$refs.right_container;
					break;
			}

			this.handleScrolldown(el);
		},
		// 选择一级分类
		changeItem(type) {
			this.is_true = "";
			this.no_data_show = false;
			this.first_level = type;
			if (this.true_or_false_list[type]) {
				let value = this.true_or_false_list[type];
				this.is_true = this.goods_form[value];
			}
			switch (type) {
				case 4:
					if (this.line.length == 0) {
						this.no_data_show = true;
					}
					break;
				case 1:
					if (this.third_goods.length == 0) {
						this.no_data_show = true;
					}
					break;
				case 2:
					if (this.third_user.length == 0) {
						this.no_data_show = true;
					}
					break;
			}
		},
		// 是或者否选择
		handleTorF(number) {
			this.is_true = numberhandleAllGoods;
			let type = this.true_or_false_list[this.first_level];
			this.goods_form[type] = number;
		},
		// 商品展开
		expandGoods(item) {
			let show = item.show;
			this.goods_type.map((e) => {
				e.show = false;
			});
			show ? "" : (item.show = true);
			this.goods_form.pid = item.id;
			this.goods_form.cid = "";
			let form = {
				pid: item.id,
			};
			this.get_goods_select(form);
		},

		handleAllGoods() {
			this.goods_type.map((e) => {
				e.show = false;
			});
			this.goods_form.pid = "";
			this.goods_form.cid = "";
			this.goods_form.goods_spu_ids = "";
			this.get_goods_select();
		},

		handleSecondsLevel(item) {
			this.goods_form.cid = item.id;
			let form = {
				pid: this.goods_form.pid,
				cid: item.id,
			};
			this.get_goods_select(form);
		},
		// 商品选择
		handleSelectGoods(item) {
			item.selected = !item.selected;
		},

		handleGoodsAllChecked(value) {
			this.third_goods.map((e) => {
				e.selected = value;
			});
		},

		// 获取商品
		get_goods_select(form = "") {
			let data = Object.assign(
				{
					sign: Md5(
						objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
					),
				},
				apiUrl().name,
				form,
				{ time: this.time }
			);
			get_goods_select(data).then((res) => {
				if (res.errcode == 0) {
					res.data.map((e) => {
						e.selected = false;
					});
					this.third_goods = res.data;
				} else {
					this.$message.error(res.errmsg);
				}
			});
		},
		// 用户分组选择
		handleUserGroup(item) {
			let form = {
				group_id: item ? item.id : "",
			};
			this.group_selected = item ? item.id : "";
			this.goods_form.group_id = item ? item.id : "";
			this.get_find_user(form);
		},

		handleUserAllChecked(value) {
			this.third_user.map((e) => {
				e.selected = value;
			});
		},

		handleSelectUser(item) {
			item.selected = !item.selected;
		},
		// 获取用户
		get_find_user(form = "") {
			let data = Object.assign(
				{
					sign: Md5(
						objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
					),
				},
				apiUrl().name,
				form,
				{ time: this.time }
			);
			get_find_user(data).then((res) => {
				if (res.errcode == 0) {
					res.data.map((e) => {
						e.selected = false;
					});
					this.third_user = res.data;
				} else {
					this.$message.error(res.errmsg);
				}
			});
		},

		// 配送路线
		handleSelectLine(item) {
			item.selected = !item.selected;
		},
		handleLineAllChecked(value) {
			this.line.map((e) => {
				e.selected = value;
			});
		},
		// 重置按钮
		reset() {
			this.is_true = "";
			this.third_goods.map((e) => {
				e.selected = false;
			});
			this.group_selected = "";
			this.third_user.map((e) => {
				e.selected = false;
			});
			this.goods_type.map((e) => {
				e.show = false;
			});
			this.goods_form = {
				is_standard: "",
				line_ids: "",
				modify: "",
				out_status: "",
				remark: "",
				pid: "",
				cid: "",
				goods_spu_ids: "",
				group_id: "",
				uids: "",
			};
		},
		// 确认提交
		confirm() {
			this.$emit("getUsersData", this.goods_form);
			this.$nextTick(() => {
				this.back();
			});
		},
		// 返回
		back() {
			this.$emit("back");
		},
		// 处理父组件传来的数据
		updata() {
			let SEARCH_DATA = JSON.parse(JSON.stringify(this.SEARCH_DATA));
			let goods_type = SEARCH_DATA.goods_type;
			let group = SEARCH_DATA.group;
			let line = SEARCH_DATA.line;
			let time = SEARCH_DATA.time;
			goods_type.map((e) => {
				e.show = false;
			});
			line.map((e) => {
				e.selected = false;
			});
			this.goods_type = goods_type;
			this.group = group;
			this.line = line;
			this.time = time;
		},
	},
	created() {
		this.updata();
		this.get_goods_select();
		this.get_find_user();
	},
};
</script>

<style lang="scss" scoped>
@import "./goods.scss";
</style>
